<template>
	<div  v-loading="loadingStatus"  element-loading-text="上传中请稍后">
		<div class="img-nav">
			<span class="nav-text-1">商户类型</span>
			<div class="nav-radio">
				<el-radio v-model="merchantType" label="1" @change='merchant'>企业（有营业执照）</el-radio>
				<el-radio v-model="merchantType" label="2" @change='merchant'>个人</el-radio>
			</div>
		</div>
		<div class="img-nav">
			<span class="nav-text-1">结算类型</span>
			<div class="nav-radio">
				<el-radio v-model="bankType" label="1" @change='bank'>对公</el-radio>
				<el-radio v-model="bankType" label="2" @change='bank'>对私</el-radio>
			</div>
		</div>
		<div class="img-nav">
			<span class="nav-text-1">入账类型</span>
			<div class="nav-radio">
				<el-radio v-model="settleType" label="1" @change='settle'>法人</el-radio>
				<el-radio v-model="settleType" label="2" @change='settle'>非法人</el-radio>
			</div>
		</div>
		<div class="img-box">
			<!-- 对公 -->
			<div class="img-box-s" v-show="merchantShow">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.c">
					<div class="del-img" @click="delshow(3)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.license" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.c">
					<div class="del-img" @click="delup(3)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.license" :src="showImg.license" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">营业执照</div>
				<div class="butt">
					<el-button @click = "upChange(3,showImg.license)" v-show="true">上传渠道</el-button>
					<el-button disabled = 'true' v-show="false">上传成功</el-button>
				</div>
			</div>
			<!-- 对公 -->
			<div class="img-box-s" v-show="licenseShow">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.d">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.opening" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.d">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.opening" :src="showImg.opening" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">开户许可证</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>
			<!-- 对私非法人 -->
			<div class="img-box-s" v-show="settleShow">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.h">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.power" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.h">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.power" :src="showImg.power" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt"> 结算授权书</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>
			<!-- 对私非法人 -->
			<div class="img-box-s" v-show="settleShow">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.j">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.beFrontCard" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.j">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.beFrontCard" :src="showImg.beFrontCard" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt"> 被授权人证件正面照</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>
			<!-- 对私非法人 -->
			<div class="img-box-s" v-show="settleShow">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.k">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.beBackCard" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.k">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.beBackCard" :src="showImg.beBackCard" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt"> 被授权人证件背面照</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>
			<!-- 对私必须 -->
			<div class="img-box-s" v-show="bankShow">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.i">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.i">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.frontBank" :src="showImg.frontBank" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">银行卡正面照</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>

			<div class="img-box-s">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.a">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.frontCard" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.a">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.frontCard" :src="showImg.frontCard" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">身份证正面</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>

			<div class="img-box-s">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.b">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.backCard" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.b">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.backCard" :src="showImg.backCard" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">身份证反面</div>
				<div class="butt">	
					<el-button>上传渠道</el-button>
				</div>
			</div>

			<div class="img-box-s">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.e">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.heand" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.e">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.heand" :src="showImg.heand" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">门头照</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>

			<div class="img-box-s">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.f">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.cashier" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.f">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="showImg.cashier" :src="showImg.cashier" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt">收银台照片</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>

			<div class="img-box-s">
				<!-- 图片展示 -->
				<div class="img-show" v-show="showImgType.g">
					<div class="del-img" @click="delshow(2)"><img :src="delImg" alt=""></div>
					<div class="show-img"><img :src="showImg.collect" alt=""></div>
				</div>
				<!-- 图片上传 -->
				<div class="img-up" v-show="upImgType.g">
					<div class="del-img" @click="delup(2)"><img :src="delImg" alt=""></div>
					<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="showImg.collect" :src="showImg.collect" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<div class="text-t butt"> 商户收单协议照片</div>
				<div class="butt">
					<el-button>上传渠道</el-button>
				</div>
			</div>

		</div>
	</div>


</template>

<script>
	export default {
		props:{
			userID:String
		},
		data() {
			return {
				delImg: require('../../../../../imgs/del.png'),
				merchantType: "1", //商户类型
				bankType: "1", //结算类型
				settleType: "1", //入账类型
				show: true, //图片存在 展示
				showup: false, //图片不存在 上传
				merchantShow: true, //企业展示
				bankShow: false, //对私(银行卡)
				licenseShow: true, //对公(营业执照)
				settleShow: false, //对私非法人使用
				loadingStatus: false,
				imageList:{},
				channelImg:{
					"0001" : '', //身份证正面a
					"0002" : '',//身份证反面b
					"0003" : '', //营业执照c
					"0005" : '', //开户许可证d
					"0006" : '', //门头照e
					"0008" : '', //收银台照片f
					"0013" : '', //商户收单协议照片g
					"0014" : '',  //结算授权书h
					"0015" : '',  //银行卡正面照i
					"0017" : '',  //被授权人证件正面照j
					"0018" : '',  // 被授权人证件背面照k
				},
				showImg:{
					frontCard : '',
					backCard : '',
					license : '',
					opening : '',
					heand : '',
					cashier : '',
					collect : '',
					power : '',
					frontBank : '',
					beFrontCard : '',
					beBackCard : '',
				},
				showImgType:{
					a:false,
					b:false,
					c:false,
					d:false,
					e:false,
					f:false,
					g:false,
					h:false,
					i:false,
					j:false,
					k:false,
				},
				upImgType:{
					a:true,
					b:true,
					c:true,
					d:true,
					e:true,
					f:true,
					g:true,
					h:true,
					i:true,
					j:true,
					k:true,
				}
			};
		},
		methods: {
			//商户类型
			merchant() {
				this.showHand();
			},
			//结算类型
			bank() {
				this.showHand();
			},
			//入账类型
			settle() {
				this.showHand();
			},
			// 显示与隐藏图片
			showHand() {
				if (this.merchantType == "1") { //企业
					this.merchantShow = true;
					if (this.bankType == "1") { //对公
						this.licenseShow = true;
						this.bankShow = false;
						if (this.settleType == "2") { ////非法人
							this.bankType = "2"; //企业 选择非法人 结算变对私
							this.settleShow = true; //对私非法人
						}
					} else { //对私
						this.bankShow = true;
						this.licenseShow = false;
						if (this.settleType == "1") { ////法人
							this.settleShow = false; //对私非法人
						} else {
							this.settleShow = true; //对私非法人
						}
					}
				} else { //个人
					this.bankType = "2"; //个人 结算变对私
					this.merchantShow = false;
					if (this.bankType == "1") { //对公 个人只能对私
						this.bankType = "2";
					} else { //对私
						this.bankShow = true;
						if (this.settleType == "1") { //法人
							this.settleShow = false; //对私非法人
						} else {
							this.settleShow = true; //对私非法人
						}
					}
				}
			},
			delshow(a) {
				this.show = false;
				this.showup = true;
				this.imageUrl = '';
			},
			delup(a) {
				this.imageUrl = '';
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(res);
				console.log(file);
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			upChange(id,url){
				console.log(id);
				console.log(url);
				//this.loadingStatus = true;
				this.$axios({
					url : '/admin/channel/other',
					data:{
						userID : this.userID,
						type : 4,
						genre : 1,
						imgID : id,
						imgUrl : url,
					},
					success(res){
						console.log(res)
					},
				});
			}
		},
		created() {
			//获取商户图片信息
			let that = this;
			this.$axios({
				url: '/admin/general/getUserInfo',
				data:{
					userID:this.userID
				},
				success(res){
					console.log(res)
					if(res.data.code == 200){
						that.imageList = res.data.content.user_file;
						//展示图片路由
						that.showImg.frontCard = that.imageList.front_card;
						that.showImg.backCard = that.imageList.back_card;
						that.showImg.license = that.imageList.business_license;
						that.showImg.opening = that.imageList.opening_account;
						that.showImg.heand = that.imageList.sign_doard;
						that.showImg.frontBank = that.imageList.bank_card;
						//图片状态
						that.showImgType.a = that.imageList.front_card ? true :false;
						that.showImgType.b = that.imageList.back_card ? true :false;
						that.showImgType.c = that.imageList.business_license ? true :false;
						that.showImgType.d = that.imageList.opening_account ? true :false;
						that.showImgType.e = that.imageList.sign_doard ? true :false;
						that.showImgType.i = that.imageList.bank_card ? true :false;
						//上传图片状态
						that.upImgType.a = that.showImgType.a ? false :true;
						that.upImgType.b = that.showImgType.b ? false :true;
						that.upImgType.c = that.showImgType.c ? false :true;
						that.upImgType.d = that.showImgType.d ? false :true;
						that.upImgType.e = that.showImgType.e ? false :true;
						that.upImgType.i = that.showImgType.i ? false :true;
					}
					console.log(that.imageList);
					console.log(that.imageList);
					console.log(that.channelImg);
				},
				error(e){
					console.log(e)
				},
			});
			
		}
	}
</script>

<style scoped>
	.img-box {
		/* border: 1px solid red; */
	}
	.img-nav {
		margin-top: 15px;
	}

	.nav-text-1 {
		font-size: 16px;
		font-weight: bold;
	}

	.nav-text-2 {
		font-size: 10px;
		color: #99A9BF;
		font-weight: 100;
	}

	.nav-text-3 {
		color: #67C23A;
	}

	.nav-radio {
		margin-top: 20px;
		margin-left: 40px;
	}

	.img-box {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.img-box-s {
		margin-left: 100px;
	}

	.img-show {
		width: 220px;
		height: 220px;
		display: flex;
		flex-direction: column;
		/* 	justify-content: center;
	align-items: center; */
	}

	.img-up {
		width: 220px;
		height: 220px;
		/* border: 1px solid #99A9BF; */
	}
	


	.del-img {
		display: flex;
		justify-content: flex-end;

	}

	.del-img img {
		height: 15px;
		width: 15px;
		border: 1px solid #FFFFFF;
		border-radius: 15px;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #888888;
	}

	.show-img img {
		height: 200px;
		width: 200px;
	}

	/* 上传样式 */

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 220px;
		height: 220px;
		line-height: 220px;
		text-align: center;
	}

	.avatar {
		width: 200px;
		height: 200px;
		display: block;
	}

	.butt {
		text-align: center;
		margin-top: 10px;
	}

	.text-t {
		font-size: 16px;
		color: #888888;
	}
</style>
